<template>
	<view>
		<view class="lb-main-32">
			<view class="lb-item">
				<view class="item-left">
					联系人
				</view>
				<view class="item-right">
					<input type="text" v-model="FormData.contact" placeholder="请输入联系人"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					联系电话
				</view>
				<view class="item-right">
					<input type="text" v-model="FormData.mobile" placeholder="请输入联系电话"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					所在地区
				</view>
				<view class="item-right" @click="showArea = true">
					<input type="text" v-model="FormData.district" placeholder="请选择所在地区"
						placeholder-style="font-size: 28rpx; color: #999999;" disabled="">
					<view class="right-icon">
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					详细地址
				</view>
				<view class="item-right">
					<input type="text" v-model="FormData.address" placeholder="请输入详细地址"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					设为默认地址
				</view>
				<view class="item-right">
					<u-switch v-model="FormData.is_default" size="20" :inactiveValue="0" :activeValue="1"
						activeColor="#31C07C"></u-switch>
				</view>
			</view>

			<view class="lb-btn" @click="formSubmit">
				保存
			</view>
		</view>

		<!-- 区域 -->
		<u-picker :show="showArea" :columns="columns" keyName="name" @change="change_city" @cancel="showArea = false"
			@confirm="choose_city"></u-picker>
	</view>
</template>

<script>
	import {
		getCityLinkageApiList
	} from "@/api/apis/comm.js"
	import {
		getMyAddrApiDetail,
		myAddrApiSave
	} from "@/api/apis/wash.js"
	import {
		mobile,
		account
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				province_list: [],
				city_list: [],
				area_list: [],
				street_list: [],
				showArea: false,
				province: '',
				city: '',
				area: '',
				street: '',
				FormData: {
					address_id: 0,
					contact: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					street: '',
					district: '',
					address: '',
					is_default: 1,
				}
			}
		},
		onLoad(options) {
			this.FormData.address_id = options.id;
		},
		onShow() {
			this.get_province();
			this.getDate();
		},
		methods: {
			getDate() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getMyAddrApiDetail({
					address_id: this.FormData.address_id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let data = res.data;
						this.FormData = {
							address_id: data.id,
							contact: data.contact,
							mobile: data.mobile,
							province: data.province,
							city: data.city,
							area: data.area,
							street: data.street,
							district: data.district,
							address: data.address,
							is_default: data.is_default,
						};
					}
				})
			},
			// 选择省市区街道
			change_city(e) {
				// console.log(e)
				if (e.columnIndex == 0) {
					this.province = this.province_list[e.index];
					this.get_city()
				} else if (e.columnIndex == 1) {
					this.city = this.city_list[e.index];
					this.get_area()
				} else if (e.columnIndex == 2) {
					this.area = this.area_list[e.index];
					this.get_street();
				} else {
					this.street = this.street_list[e.index];
				}
			},
			// 获取省
			get_province() {
				getCityLinkageApiList().then(res => {
					if (res.code == 1) {
						this.province_list = res.data;
						this.province = res.data[0];
						console.log(res.data)
						this.get_city()
					}
				})
			},
			//获取市
			get_city() {
				getCityLinkageApiList({
					p_code: this.province.code
				}).then(res => {
					if (res.code == 1) {
						this.city_list = res.data;
						this.city = res.data[0];
						this.get_area();
					}
				})
			},
			//获取区
			get_area() {
				getCityLinkageApiList({
					p_code: this.city.code
				}).then(res => {
					if (res.code == 1) {
						if (res.data.length) {
							this.area_list = res.data;
							this.area = res.data[0];
							this.get_street();
						} else {
							this.area_list = [];
							this.area = '';
							this.street_list = [];
							this.street_list = '';
						}

					}
				})
			},
			//获取街道
			get_street() {
				getCityLinkageApiList({
					p_code: this.area.code
				}).then(res => {
					if (res.code == 1) {
						if (res.data.length) {
							this.street_list = res.data;
							this.street = res.data[0];
						} else {
							this.street_list = [];
							this.street_list = '';
						}
					}
				})
			},
			//确认区域
			choose_city(e) {
				// console.log(e)
				let addr = e.value[0].name + e.value[1].name;
				if (e.value[2] && e.value[2] != undefined) {
					addr = addr + e.value[2].name;
				}
				if (e.value[3] && e.value[3] != undefined) {
					addr = addr + e.value[3].name;
				}

				this.FormData.district = addr;
				this.FormData.province = e.value[0].code;
				this.FormData.city = e.value[1].code;
				this.FormData.area = e.value[2] && e.value[2] != undefined ? e.value[2].code : '';
				this.FormData.street = e.value[3] && e.value[3] != undefined ? e.value[3].code : '';
				this.showArea = false;
			},

			//提交
			formSubmit() {
				if (!account(this.FormData.contact)) {
					this.$u.toast('请输入联系人!');
					return;
				} else if (!mobile(this.FormData.mobile)) {
					this.$u.toast('请输入正确的手机号!');
					return;
				} else if (!account(this.FormData.district)) {
					this.$u.toast('请选择所在区域!');
					return;
				} else if (!account(this.FormData.address)) {
					this.$u.toast('请输入详细地址!');
					return;
				}
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				myAddrApiSave(this.FormData).then(res => {
					uni.hideLoading();
					this.$u.toast('保存成功!');
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})

			}
		},
		computed: {
			columns() {
				return [this.province_list, this.city_list, this.area_list, this.street_list]
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lb-tip {
		font-size: $main-font-20;
		color: #F65D40;
		padding: 12rpx 0;
	}

	.lb-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 42rpx 0 24rpx 0;
		border-top: 2rpx solid #F5F5F5;

		&:nth-of-type(1) {
			border: none;
			padding-top: 10rpx;
		}

		.item-left {

			width: 200rpx;
			font-size: $main-font-28;
			color: $main-font-color;
			white-space: nowrap;

			&::before {
				content: '* ';
				color: #F65D40;
			}
		}

		.item-right {
			width: calc(100% - 150rpx);

			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			input {
				width: 100%;
				text-align: right;
				font-size: $main-font-28;
				color: $main-font-color;
			}

			.right-icon {
				display: flex;
				flex-direction: row;
				padding: 12rpx;
			}


		}

	}


	.lb-btn {
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 44rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: $main-font-28;
		color: $main-font-color-white;
		margin: 140rpx auto 0;
	}
</style>